<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
    <div class="centermap">


        <div class="maptitle">
            <div class="zuo"></div>
            <div class="dark-select">
                <el-select
                        :popper-append-to-body="false"
                        v-model="sizeLang"
                        placeholder="选择展示类型"
                        style="width: 300px"
                        popper-class="select-popper"

                >
                    <el-option
                            style="width: 300px"
                            v-for="item in langueOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"

                    />
                </el-select>
            </div>
            <div class="you"></div>
        </div>
        <div class="mapwrap">

            <dv-border-box-13>
                <div class="quanguo" v-if="showYear!=null" @click="dialogVisible=true">
                    {{ showYear }}年
                </div>
                <div class="zanting" @click="stopTime">
                    {{ stopText }}
                </div>

                <div class="inside_map_title" v-if="title !== ''">
                    <div style="margin-top: 5px; display: flex;justify-content: center;">
                        <div class="zuo_map"></div>
                        <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
                        <div class="you_map"></div>
                    </div>
                </div>

                <Echart id="CenterMap" :options="options" ref="CenterMap"/>
            </dv-border-box-13>

            <el-dialog :visible.sync="dialogVisible"
                       :append-to-body="true"
                       title="示例对话框" width="30%">
                <el-select v-model="elSelectYear" placeholder="请选择">
                    <el-option
                            v-for="item in firstData"
                            :key="item.year"
                            :label="item.year"
                            :value="item.year">
                    </el-option>
                </el-select>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false;selectingYear()">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>


<script>
import xzqCode from "../../utils/map/xzqCode";
import {currentGET} from "api/modules";
import * as echarts from "echarts";
import {GETNOBASE} from "api";


export default {
    data() {
        return {
            timers: null,
            maptitle: "设备分布图",
            options: {},
            code: "china", //china 代表中国 其他地市是行政编码
            echartBindClick: false,
            isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
            sizeLang: "", // 添加 sizeLang
            stopText: "暂停",
            selectName: "",
            elSelectYear: null,//el组件绑定的年份
            selectedYear: null,//选定要展示的年份
            firstData: null,//初次载入数据用来给循环播放当数据
            nowIndex: null,//循环播放的当前位置
            showYear: null,//展示的年份,
            title: "全国教育资源&医疗资源分布及发展趋势",//地图标题
            pieces: [],//地图数据分级
            danwei:'万元',//地图数据单位
            dialogVisible: false,//年份选择器出现判断
            langueOptions: [
                // 添加 langueOptions
                {
                    value: "地方财政医疗卫生支出",
                    label: "卫生数据",
                },
                {
                    value: "教育",
                    label: "教育数据",
                },
            ],
        };
    },
    created() {
        this.sizeLang = "教育";
    },
    watch: {
        // vue2写法
        sizeLang: {
            handler(value) {

                if (value == '教育') {
                    this.danwei="万元";
                    this.pieces = [
                        {gte: 50000000, label: "5000亿元以上"}, // 不指定 max，表示 max 为无限大（Infinity）。
                        {gte: 30000000, lte: 49999999, label: "3000-4999亿元"},
                        {gte: 20000000, lte: 29999999, label: "2000-2999亿元"},
                        {gte: 10000000, lte: 19999999, label: "1000-1999亿元"},
                        {gte: 5000000, lte: 9999999, label: "500-999亿元"},
                        {gte: 3000000, lte: 4999999, label: "300-499亿元"},
                        {gte: 1000000, lte: 2999999, label: "100-299亿元"},
                        {lte: 999999, label: "1-99亿元"}, // 不指定 min，表示 min 为无限大（-Infinity）。
                    ]

                    this.getData("china", value)

                } else if (value == '地方财政医疗卫生支出') {
                    this.danwei="亿元";
                    this.pieces = [
                        {gte: 1300, label: "1300亿元以上"}, // 不指定 max，表示 max 为无限大（Infinity）。
                        {gte: 1000, lte: 1299.99, label: "1000-1299亿元"},
                        {gte: 700, lte: 999.99, label: "700-999亿元"},
                        {gte: 500, lte: 699.99, label: "500-699亿元"},
                        {gte: 200, lte: 499.99, label: "200-499亿元"},
                        {gte: 100, lte: 199.99, label: "100-199亿元"},
                        {gte: 50, lte: 99.99, label: "50-99亿元"},
                        {gte: 20, lte: 49.99, label: "20-49亿元"},
                        {lte: 19.99, label: "1-19亿元"}, // 不指定 min，表示 min 为无限大（-Infinity）。
                    ]
                    this.getData("china", value)
                }
            },
        },

    },

    mounted() {

        // console.log(xzqCode);
        this.getData("china");
    },
    methods: {

        getDataAndTetInterval(isContinue) {
            if (isContinue == 1) {//切换新数据
                clearInterval(this.timers);
                this.nowIndex = this.firstData.length - 1
            } else {//普通暂停和继续

            }

            if (isContinue == 2) {//选定年份切换
                this.stopText = "开始";
                this.showYear = this.firstData[this.nowIndex].year
                this.getGeojson('china', this.firstData[this.nowIndex].dataList);
                clearInterval(this.timers);
            } else {
                this.timers = setInterval(() => {

                    if (this.nowIndex >= 0) {
                        if (this.firstData[this.nowIndex].year == null) {
                            this.nowIndex = this.nowIndex - 1
                        }

                        this.showYear = this.firstData[this.nowIndex].year
                        this.getGeojson('china', this.firstData[this.nowIndex].dataList);
                        this.nowIndex = this.nowIndex - 1;
                    }
                    if (this.nowIndex == -1) {
                        this.nowIndex = this.firstData.length - 1
                    }

                }, 1000);
            }

        },

        stopTime() {
            if (this.stopText === "暂停") {
                clearInterval(this.timers);
            } else if (this.stopText === "开始") {
                this.getDataAndTetInterval(0)
            }
            this.stopText = this.stopText === "开始" ? "暂停" : "开始"
        },


        getData(code, data) {
            clearInterval(this.timers);
            this.stopText = "暂停";

            currentGET("centerMap", {Query: data}).then((res) => {

                if (res.code == 200) {
                    console.log("中央地图成功", res.data);
                    this.firstData = res.data

                    this.nowIndex = 0

                    this.getDataAndTetInterval(1);


                    // this.showYear = this.firstData[this.nowIndex].year
                    // this.getGeojson(code, res.data[0].dataList);
                } else {
                    this.$Message.warning('code = ', res.code);
                }
            });


        },
        /**
         * @description: 获取geojson
         * @param {*} name china 表示中国 其他省份行政区编码
         * @param {*} mydata 接口返回列表数据
         * @return {*}
         */

        selectingYear() {
            if (this.elSelectYear != null) {
                this.selectedYear = this.elSelectYear;

                for (let i = 0; i < this.firstData.length; i++) {
                    if (this.selectedYear == this.firstData[i].year) {
                        this.nowIndex = i;
                        this.getDataAndTetInterval(2);
                    }
                }

            }
        },
        async getGeojson(name, mydata) {
            this.code = name;
            //如果要展示南海群岛并且展示的是中国的话
            let geoname = name;
            if (this.isSouthChinaSea && name == "china") {
                geoname = "chinaNanhai";
            }


            //如果有注册地图的话就不用再注册 了
            let mapjson = echarts.getMap(name);

            if (mapjson) {
                mapjson = mapjson.geoJSON;
            } else {

                mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
                    (res) => {
                        return res;
                    }
                );
                echarts.registerMap(name, mapjson);
            }

            let cityCenter = {};
            let arr = mapjson.features;


            //根据geojson获取省份中心点
            arr.map((item) => {


                cityCenter[item.properties.name] =
                    item.properties.centroid || item.properties.center;
            });


            let newData = [];
            mydata.map((item) => {
                if (cityCenter[item.name]) {
                    newData.push({
                        name: item.name,
                        value: cityCenter[item.name].concat(item.value),
                    });
                }
            });

            this.init(name, mydata, newData);
        },

        init(name, data, data2) {
            let top = 45;
            let zoom = 1.05;
            let danWei=this.danwei;
            let option = {
                backgroundColor: "rgba(0,0,0,0)",
                tooltip: {
                    show: false,
                },
                legend: {
                    show: false,
                },
                visualMap: {
                    left: 20,
                    bottom: 20,
                    pieces: this.pieces,
                    inRange: {
                        // 渐变颜色，从小到大
                        color: [
                            "rgb(0,82,255)",
                            "#3282e8",
                            "#74a3e8",
                            "#3aa3ad",
                            "#0cc779",
                            "#bcc966",
                            "#dc6c30",
                            "#c73015",
                            "#ec0f0f",
                        ],
                    },
                    textStyle: {
                        color: "#fff",
                    },
                },
                geo: {
                    map: name,
                    roam: false,
                    selectedMode: false, //是否允许选中多个区域
                    zoom: zoom,
                    top: top,
                    // aspectScale: 0.78,
                    show: false,
                },
                series: [
                    {
                        name: "MAP",
                        type: "map",
                        map: name,
                        // aspectScale: 0.78,
                        data: data,
                        // data: [1,100],
                        selectedMode: false, //是否允许选中多个区域
                        zoom: zoom,
                        geoIndex: 1,
                        top: top,
                        tooltip: {
                            show: true,
                            formatter: function (params) {
                                if (params.data) {
                                    return params.name + "：" + params.data["value"] + danWei;
                                } else {
                                    return params.name;
                                }
                            },
                            backgroundColor: "rgba(0,0,0,.6)",
                            borderColor: "rgba(147, 235, 248, .8)",
                            textStyle: {
                                color: "#FFF",
                            },
                        },
                        label: {
                            show: false,
                            color: "#000",
                            // position: [-10, 0],
                            formatter: function (val) {
                                // console.log(val)
                                if (val.data !== undefined) {
                                    return val.name.slice(0, 2);
                                } else {
                                    return "";
                                }
                            },
                            rich: {},
                        },
                        emphasis: {
                            label: {
                                show: false,
                            },
                            itemStyle: {
                                areaColor: "#000e42",
                                borderWidth: 1,
                            },
                        },
                        itemStyle: {
                            borderColor: "rgba(147, 235, 248, .8)",
                            borderWidth: 1,
                            areaColor: {
                                type: "radial",
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                    },
                                ],
                                globalCoord: false, // 缺为 false
                            },
                            shadowColor: "rgba(128, 217, 248, .3)",
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10,
                        },
                    },
                    {
                        data: data2,
                        type: "effectScatter",
                        coordinateSystem: "geo",
                        symbolSize: function (val) {
                            return 4;
                            // return val[2] / 50;
                        },
                        legendHoverLink: true,
                        showEffectOn: "render",
                        rippleEffect: {
                            // period: 4,
                            scale: 6,
                            color: "rgba(255,255,255, 1)",
                            brushType: "fill",
                        },
                        tooltip: {
                            show: true,
                            formatter: function (params) {
                                if (params.data) {
                                    return params.name + "：" + params.data["value"][2];
                                } else {
                                    return params.name;
                                }
                            },
                            backgroundColor: "rgba(0,0,0,.6)",
                            borderColor: "rgba(147, 235, 248, .8)",
                            textStyle: {
                                color: "#FFF",
                            },
                        },
                        label: {
                            formatter: (param) => {
                                return param.name.slice(0, 2);
                            },

                            fontSize: 11,
                            offset: [0, 2],
                            position: "bottom",
                            textBorderColor: "#fff",
                            textShadowColor: "#000",
                            textShadowBlur: 10,
                            textBorderWidth: 0,
                            color: "#FFF",
                            show: true,
                        },
                        // colorBy: "data",
                        itemStyle: {
                            color: "rgba(255,255,255,1)",
                            borderColor: "rgba(2255,255,255,2)",
                            borderWidth: 4,
                            shadowColor: "#000",
                            shadowBlur: 10,
                        },
                    },
                ],
                //动画效果
                animationDuration: 1000,
                animationEasing: 'linear',
                animationDurationUpdate: 1000
            };
            this.options = option;
        },
        message(text) {
            this.$Message({
                text: text,
                type: "warning",
            });
        },
        mapclick() {
            if (this.echartBindClick) return;
            //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
            this.$refs.CenterMap.chart.on("click", (params) => {
                // console.log(params);
                let xzqData = xzqCode[params.name];
                if (xzqData) {
                    this.getData(xzqData.adcode);
                } else {
                    this.message("暂无下级地市!");
                }
            });
            this.echartBindClick = true;
        },
    },

    beforeDestroy() {
        if (this.timers) {
            clearInterval(this.timers);
        }
    }
};
</script>
<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;


  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    // .titletext {
    //   font-size: 28px;
    //   font-weight: 900;
    //   letter-spacing: 6px;
    //   background: linear-gradient(
    //     92deg,
    //     #0072ff 0%,
    //     #00eaff 48.8525390625%,
    //     #01aaff 100%
    //   );
    //   -webkit-background-clip: text;
    //   -webkit-text-fill-color: transparent;
    //   margin: 0 10px;
    // }
    .dark-select {
      // 修改下拉框背景颜色
      //修改的是el-input的样式

      //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色

      //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色

      ::v-deep .el-select,
      ::v-deep .el-input,
      ::v-deep .el-input__inner {
        border-radius: 10px;
        color: #ffffff;
        background-color: #070f21;
        border: 1px solid #33394d;
        //border: 1px solid green;
        // border-radius: 1px;
        // border-color: #33394d;
        // text-align: center;
      }

      //el-input聚焦的时候 外层的border会有一个样式
      ::v-deep .el-select .el-input.is-focus .el-input__inner {
        //border:0px;
        border: 1px solid #33394d;
      }

      //修改的是el-input上下的小图标的颜色

      ::v-deep .el-select .el-input .el-select__caret {
        color: #ffffff;
      }

      //修改总体选项的样式 最外层

      ::v-deep .el-select-dropdown {
        //rgba(87,133,87,0.8)
        background: #070f21;
        //margin: 0px;
        border: 0px;
        //border-radius: 0px;
        //left: 0px !important;
      }

      //修改单个的选项的样式

      ::v-deep .el-select-dropdown__item {
        background-color: transparent;
        color: #fff;
      }

      //item选项的hover样式

      ::v-deep .el-select-dropdown__item.hover,
      ::v-deep .el-select-dropdown__item:hover {
        background: #4d5b87 !important;
        border-radius: 8px !important;
        color: #fff !important;
        margin: 0 0.7vh !important;
      }

      //修改的是下拉框选项内容上方的尖角
      ::v-deep .el-popper .popper__arrow,
      .el-popper .popper__arrow::after {
        display: none;
      }
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }


  }

  .inside_map_title {
    padding-top: 10px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;

    .zuo_map,
    .you_map {
      width: 58px;
      height: 14px;
      background-image: url("../../assets/img/titles/zuo.png");
    }

    .you_map {
      transform: rotate(180deg);
    }

    .title-inner {
      font-weight: 900;
      letter-spacing: 2px;
      background: linear-gradient(
                      92deg,
                      #0072ff 0%,
                      #00eaff 48.8525390625%,
                      #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }


  .mapwrap {
    height: 548px;
    width: 100%;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 100px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
      0 0 6px rgba(0, 237, 237, 0.4);
    }

    .zanting {
      position: absolute;
      left: 20px;
      top: -46px;
      width: 100px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
      0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}


</style>

